<template>
  <div>
    <!-- nav-bar
      this.$router.push() : 路由跳转
      this.$router.back() : 路由后退  ===== 页面中的后退按钮
    -->
    <van-nav-bar
      title="搜索中心"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      v-model.trim="keyword"
      show-action
      @input="hInput"
      placeholder="请输入搜索关键词"
    >
      <!-- #action  ==== slot="action" -->
      <!-- <template slot="action">
        <div>搜索</div>
      </template> -->
      <div slot="action" @click="hSearch">搜索</div>
    </van-search>

    <!-- 2. 搜索建议
     根据你在上面输入的关键字，后端会返回建议
    -->
    <van-cell-group v-if="suggestions.length">
      <van-cell
        v-for="(suggestion, idx) in cSuggestions"
        :key="idx"
        icon="search"
        @click="hClickSuggetion(idx)"
      >
        <div v-html="suggestion"></div>
      </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"></van-cell>
      <van-cell
        v-for="(item, idx) in historys"
        :key="idx"
        :title="item"
        @click="$router.push('/search/result?keyword=' + item)"
      >
        <van-icon name="close" @click.stop="hDelHistory(idx)" />
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { getSuggestion } from '@/api/search.js'
import { heightLight } from '@/utils/index.js'
import { setHistory, getHistory } from '@/utils/storageHistory.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '',
      suggestions: [], // 联想建议
      historys: getHistory() || []
    }
  },
  computed: {
    cSuggestions () {
      // this.suggestions中的每一项都去做替换
      // suggestions中的每一项   ====> heightLight(suggestions中的每一项, this.keyword)
      return this.suggestions.map(item => {
        return heightLight(item, this.keyword)
      })
    }
  },
  methods: {
    // 用户在搜索框输入的内容发生了变化
    async hInput () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.doAjax()
      }, 200)
    },
    async doAjax () {
      if (this.keyword === '') {
        this.suggestions = []
        return
      }
      try {
        const { data: { data } } = await getSuggestion(this.keyword)
        this.suggestions = data.options
      } catch (err) {
        console.log(err)
      }
    },
    // 添加一条历史
    // 1. 不能有重复项
    // 2. 后加入要放在数组的最前面
    addHistory (str) {
      // (1) 找一下，是否有重复，如果有，就是删除
      const idx = this.historys.findIndex(item => item === str)
      // idx !== -1 && this.historys.splice(idx, 1)
      if (idx > -1) {
        this.historys.splice(idx, 1)
      }
      // (2) 加在数组的前面
      this.historys.unshift(str)
      // (3) 持久化
      setHistory(this.historys)
    },
    // 情况1：用户点击了搜索
    hSearch () {
      // 1. 添加一条历史
      this.addHistory(this.keyword)
      // 2. 跳转到搜索结果页
      this.$router.push('/search/result?keyword=' + this.keyword)
    },
    //  情况2： 用户点击了搜索建议
    hClickSuggetion (idx) {
      // 1. 添加一条历史
      this.addHistory(this.suggestions[idx])
      // 2. 跳转到搜索结果页
      this.$router.push('/search/result?keyword=' + this.suggestions[idx])
    },
    // 用户点击了删除历史记录
    hDelHistory (idx) {
      this.historys.splice(idx, 1)
      // 持久化
      setHistory(this.historys)
    }
  }
}
</script>
